<template>
  <div :class="classes">
    <div v-resize="_domResize" ref="charts" :class="canvasClasses" :id="id"></div>
  </div>
</template>

<script>
import Echarts from 'echarts'
import 'echarts/theme/dark.js'
export default {
  name: 'AniEcharts',
  props: {
    echartsOption: {
      type: Object,
      default: () => ({})
    },
    id: {
      type: String
    }
  },
  directives: {
    // 指令的名称
    resize: {
      // el为绑定的元素，binding为绑定给指令的对象
      bind (el, binding) {
        // console.log(el, '绑定', binding)
        let width = ''
        let height = ''
        function isReize () {
          const style = document.defaultView.getComputedStyle(el)
          if (width !== style.width || height !== style.height) {
            // 关键(这传入的是函数,所以执行此函数)
            binding.value({ width: style.width, height: style.height })
          }
          width = style.width
          height = style.height
        }
        el.__vueSetInterval__ = setInterval(isReize, 300)
      },
      unbind (el) {
        // console.log(el, '解绑')
        clearInterval(el.__vueSetInterval__)
      }
    }
  },
  data () {
    return {
      myChart: null
    }
  },
  computed: {
    classes () {
      return [`ani-echarts`]
    },
    canvasClasses () {
      return [`ani-echarts-cont`]
    },
    themes () {
      return this.$store.state.app.themes
    },
    collapse () {
      return this.$store.state.app.collapse
    }
  },
  watch: {
    echartsOption: {
      handler (val) {
        // this.myChart.setOption(val)
      },
      deep: true
    },
    themes: {
      handler (val) {
        setTimeout(() => {
          this.myChart.dispose()
          this.loadEcharts('themes')
        })
      },
      deep: true
    },
    collapse (val) {
      setTimeout(() => {
        this.loadEcharts()
        this.resizeEcharts()
      })
    }
  },
  created () {
  },
  mounted () {
    // TODO: 问题原因是还没加载完
    setTimeout(() => {
      this.loadEcharts()
      this.myChart.resize()
      // window.addEventListener('resize', this.resizeEcharts)
    })
  },
  updated () {
    this.loadEcharts()
  },
  destroyed () {
    // window.removeEventListener('resize', this.resizeEcharts)
  },
  methods: {
    _domResize (val) {
      // console.log(val)
      this.myChart.resize()
    },
    resizeEcharts () {
      this.myChart.resize()
    },
    loadEcharts (themes) {
      // if (themes) {
      //   this.myChart.dispose()
      // }
      let theme = []
      if (sessionStorage.getItem('themes')) {
        theme = JSON.parse(sessionStorage.getItem('themes'))
        if (theme.length !== 0) {
          this.myChart = Echarts.init(document.getElementById(this.id), 'dark')
        } else {
          this.myChart = Echarts.init(document.getElementById(this.id), '')
        }
      } else {
        this.myChart = Echarts.init(document.getElementById(this.id))
      }
      // this.myChart = Echarts.init(document.getElementById(this.id))
      this.myChart.setOption(this.echartsOption, true)
      // this.myChart.setOption(this.echartsOption)
    }
  }
}
</script>

<style lang="stylus" scoped>
.ani-echarts
  width 100%
  .ani-echarts-cont
    width 100%
    height 100%
</style>
